<div class="mat-elevation-z8">
    <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
  <table mat-table class="full-width-table" matSort aria-label="Elements">
    <ng-container matColumnDef="displayName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
      <td mat-cell *matCellDef="let row"><a [routerLink]="['/groups/', row.objectId]">{{row.displayName}}</a></td>
    </ng-container>

    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
      <td mat-cell *matCellDef="let row">{{row.description}}</td>
    </ng-container>

    <ng-container matColumnDef="created">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Created</th>
      <td mat-cell *matCellDef="let row">{{row.createdDateTime}}</td>
    </ng-container>

    <ng-container matColumnDef="dirSyncEnabled">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Group source</th>
      <td mat-cell *matCellDef="let row">{{ row.dirSyncEnabled? 'Synced with AD':'Cloud-only' }}</td>
    </ng-container>

    <ng-container matColumnDef="groupTypes">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Group type</th>
      <td mat-cell *matCellDef="let row">{{ row.groupTypes.includes('Unified')? 'Microsoft 365':'Security' }}</td>
    </ng-container>

    <ng-container matColumnDef="mail">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Mail</th>
      <td mat-cell *matCellDef="let row">{{row.mail}}</td>
    </ng-container>

    <ng-container matColumnDef="isPublic">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Public?</th>
      <td mat-cell *matCellDef="let row"><mat-icon *ngIf="row.isPublic" aria-hidden="false" aria-label="Public group">check</mat-icon></td>
    </ng-container>

    <ng-container matColumnDef="isAssignableToRole">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Role assignable?</th>
      <td mat-cell *matCellDef="let row"><mat-icon *ngIf="row.isAssignableToRole" aria-hidden="false" aria-label="Can be assigned to roles">check</mat-icon></td>
    </ng-container>

    <ng-container matColumnDef="membershipRule">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Dynamic membership</th>
      <td mat-cell *matCellDef="let row"><mat-icon *ngIf="row.membershipRule != null" aria-hidden="false" aria-label="Has dynamic membership">check</mat-icon></td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator [pageSizeOptions]="[50, 100, 500, 1000, 5000]"></mat-paginator>
</div>
<router-outlet></router-outlet>
